<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<ui:composition template="/templates/template.xhtml">
	<ui:define name="title">Cassandraview main page</ui:define>
	<ui:define name="body">
		<rich:accordion switchType="client">
			<rich:accordionItem header="Recent connections" id="t_container">
				<rich:dataTable iterationStatusVar="it" value="#{indexPage.recentHosts}" var="host" id="table" rowClasses="odd-row, even-row" styleClass="stable">
					<rich:column>
		                <f:facet name="header">#</f:facet>
		                #{it.index}
		            </rich:column>
					<rich:column>
						<f:facet name="header"><h:outputText value="host" /></f:facet>
						#{host.host}
					</rich:column>
					<rich:column>
						<f:facet name="header"><h:outputText value="port" /></f:facet>
						#{host.port}
					</rich:column>
					<rich:column>
						<f:facet name="header"><h:outputText value="jmxPort" /></f:facet>
						#{host.jmxPort}
					</rich:column>
					<rich:column>
		                <a4j:commandLink execute="@this" render="@none" oncomplete="#{rich:component('confirmPane')}.show()">
		                	Connect
		                    <a4j:param value="#{it.index}" assignTo="#{indexPage.tableIndex}" />
		                </a4j:commandLink>
	                </rich:column>
				</rich:dataTable>
				<rich:popupPanel id="confirmPane" autosized="true"> 
			        Are you sure you want to connect to selected host?
			        <a4j:commandButton value="Cancel" onclick="#{rich:component('confirmPane')}.hide(); return false;" />
			        <a4j:commandButton value="Connect" onclick="connect(); return false;" />
			    </rich:popupPanel>
			    <a4j:jsFunction name="connect" action="#{indexPage.reconnect}" render="table" execute="@this"
           			oncomplete="#{rich:component('confirmPane')}.hide();" />
				<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
			    <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
			    <rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')"/>
			    <rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')"/>
			</rich:accordionItem>
			<rich:accordionItem header="New connection">
				<rich:panel>
					<h:outputText value="New host:" />
					<h:inputText value="#{indexPage.newHost}" id="host">
						<f:validateRequired />
						<f:validateRegex pattern="^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$" />
						<rich:validator />
					</h:inputText>
					<rich:message for="host"/>
					<h:outputText style="padding-left: 10px;" value="New port:" />
					<h:inputText value="#{indexPage.newPort}" id="port">
						<f:validateRequired />
						<f:validateLongRange min="1" max="65535"/>
						<rich:validator />
					</h:inputText>
					<rich:message for="port"/>
					<h:outputText style="padding-left: 10px;" value="New JMX port:" />
					<h:inputText value="#{indexPage.newJmxPort}" id="jmxPort">
						<f:validateRequired />
						<f:validateLongRange min="1" max="65535"/>
						<rich:validator />
					</h:inputText>
					<rich:message for="jmxPort"/>
					<br />
					<h:commandButton style=" width: 90px;height: 25px;margin-top: 5px;" action="#{indexPage.makeNewConnection}" value="Connect" />
				</rich:panel>
			</rich:accordionItem>
		</rich:accordion>
	</ui:define>
</ui:composition>

</html>